<template>
  <div>
    <div class="upload_box">
      <div class="img_list">
        <div class="img_box" v-for="(item, index) in imgList" :key="index">
          <div class="closeimg el-icon-circle-close" @click="detailImg(index)"></div>
          <div class="move_box">
            <span class="el-icon-back" v-if="index != 0" @click="leftMove(index)"></span>
            <span class="el-icon-right" :style="index!=0?'margin-left: 20px':''" v-if="index + 1 != imgList.length"
              @click="rigthtMove(index)"></span>
          </div>
          <img :src="item" alt="" />
        </div>
        <el-upload v-if="imgList.length < count" class="avatar-uploader2" :action="action" :show-file-list="false"
          :on-success="listAvatarSuccess" :before-upload="beforeAvatarUpload" :multiple="true">
          <i class="el-icon-plus" style="font-size: 28px"></i>
        </el-upload>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "addActive",
    props: {
      imgList: {
        type: Array,
        default: () => []
      },
      count:{
        type: Number,
        value: 10,
      },
    },
    components: {},
    data() {
      return {
        dialogImageUrl: "",
        dialogVisible: false,
        action: process.env.VUE_APP_BASE_API + "/common/v1/uploadFile",
        limit: 5,
        // imgList: [],
      };
    },
    created() {
      
    },
    methods: {
      beforeAvatarUpload(file) {
        console.log("file", file);
        console.log("554648", this.limit, this.imgList);
        const format = ["image/jpeg", "image/jpg", "image/png"];
        const isJPG = format.some((item) => file.type === item);
        //   const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error("上传头像图片只能是 jpeg,jpg,png格式!");
        }
        //   if (!isLt2M) {
        //     this.$message.error("上传头像图片大小不能超过 2MB!");
        //   }
        //   return isJPG && isLt2M;
        return isJPG;
      },
      listAvatarSuccess(res, file, fileList) {
        //图片上传
        this.imgList.push(res.result.url);
        console.log(this.count)
        if (this.imgList.length > this.count) {
          this.imgList.splice(this.count-1, this.imgList.length - this.count);
        }
        // if (this.imgList.length > 5) {
        //   this.imgList.splice(4, this.imgList.length - 5);
        // }
        this.$emit("getImgLs", this.imgList);
      },
      onExceed(files, fileList) {
        console.log(this.limit, fileList);
        this.$message.error("最多上传5张图片");
      },
      detailImg(index) {
        //删除图片
        console.log(index);
        this.imgList.splice(index, 1);
        this.limit = 5 - this.imgList.length;
        console.log(this.limit);
        this.$emit("getImgLs", this.imgList);
      },
      leftMove(index) {
        //左移
        if (index != 0) {
          this.imgList[index] = this.imgList.splice(
            index - 1,
            1,
            this.imgList[index]
          )[0];
        } else {
          this.imgList.push(this.imgList.shift());
        }
        this.limit = 5 - this.imgList.length;
        console.log(this.limit);
        this.$emit("getImgLs", this.imgList);
      },
      rigthtMove(index) {
        //右移
        if (index != this.imgList.length - 1) {
          this.imgList[index] = this.imgList.splice(
            index + 1,
            1,
            this.imgList[index]
          )[0];
        } else {
          this.imgList.unshift(this.imgList.splice(index, 1)[0]);
        }
        this.limit = 5 - this.imgList.length;
        console.log(this.limit);
        this.$emit("getImgLs", this.imgList);
      },
      onRemove(file, fileList) {
        console.log(fileList);
      },
      onError(err, file, fileList) {
        console.log(fileList);
      },
    },
  };

</script>
<style lang="scss" scoped>
  .img_box {
    width: 128px;
    height: 128px;
    margin-right: 20px;
    margin-bottom: 50px;
    border-radius: 4px;
    position: relative;
  }

  .img_list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .img_list img {
    border-radius: 4px;
    width: 100%;
    height: 100%;
  }

  .img_list::v-deep .avatar-uploader2 .el-upload {
    width: 100% !important;
  }

  .closeimg {
    position: absolute;
    top: 0px;
    right: 0;
    z-index: 99;
    font-size: 28px;
    cursor: pointer;
    background: #4e4e4e;
    color: #ffffff;
  }

  .avatar-uploader2 {
    width: 128px;
    height: 128px;
    text-align: center;
    line-height: 128px;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    margin-bottom: 50px;
  }

  .move_box {
    position: absolute;
    bottom: -30px;
    width: 100%;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
  }

  .move_box span {
    cursor: pointer;
  }

  .move_box img {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

</style>
